<template>
  <div class="acountlist-content marginmain">
    <ul>
      <li>
        <span class="iconfont icon-zhangdan"></span>
        <div>
          <p style="color: #ccc">总订单</p>
          <p>{{ totalorder }}</p>
        </div>
      </li>
      <li>
        <span class="iconfont icon-qian"></span>
        <div>
          <p style="color: #ccc">总销售额</p>
          <p>{{ totcalmoney }}</p>
        </div>
      </li>
      <li>
        <span class="iconfont icon-diancan"></span>
        <div>
          <p style="color: #ccc">今日订单数</p>
          <p>{{ ordertoday }}</p>
        </div>
      </li>
      <li>
        <span class="iconfont icon-qian4"></span>
        <div>
          <p style="color: #ccc">今日销售额</p>
          <p>{{ moneytoday }}</p>
        </div>
      </li>
    </ul>
    <div id="echart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { totaldata } from "@/apis/echardata";
export default {
  data() {
    return {
      oldpwd: "",
      newpwd: "",
      confirmpwd: "",
      totalorder: "", //总订单
      totcalmoney: "", //总金额
      ordertoday: "", //今日订单
      moneytoday: "", //今日销售额
    };
  },

  mounted() {
    totaldata().then((res) => {
      (this.totalorder = res.data.totalOrder),
        (this.totcalmoney = res.data.totalAmount),
        (this.ordertoday = res.data.todayOrder),
        (this.moneytoday = res.data.totayAmount);
      var chartDom = document.getElementById("echart");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "折线图堆叠",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数据", "销售额数据"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            stack: "总量",
            data: res.data.orderData,
          },
          {
            name: "销售额数据",
            type: "line",
            data: res.data.amountData,
          },
        ],
      };
      option && myChart.setOption(option);
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/common.less");
.acountlist-content {
  display: flex;
  flex-direction: column;
  width: 98%;
  height: 100%;

  .fz-big {
    font-weight: 700;
  }
  ul {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    li {
      text-align: center;
      padding: 20px 20px;
      width: 20%;
      height: 50px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      border-radius: 10px;
      background-color: rgb(95, 167, 226);
      background-size: 100% 100px;
      span {
        font-size: 50px;
        color: rgb(73, 90, 168);
      }
      div {
        margin-top: 10px;
        color: #fff;
      }
    }
  }
  #echart {
    margin-left: 30px;
    background: #fff;
    width: 90%;
    margin: 20px 5% 0 5%;
    height: 350px;
  }
}
</style>